<!-- 角色权限分配弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :visible="visible"
    title="分配权限"
    width="800px"
    class="ele-popup-dialog"
    @closed="closed"
    @update:visible="updateVisible"
  >
    <el-tabs v-model="active">
      <el-tab-pane
        label="菜单权限"
        name="menu"
        :disabled="authLoading"
      ></el-tab-pane>
      <el-tab-pane
        label="竞价权限"
        name="sem"
        :disabled="authLoading"
      ></el-tab-pane>
      <el-tab-pane
        label="信息流权限"
        name="feed"
        :disabled="authLoading"
      ></el-tab-pane>
      <el-tab-pane
        label="微信权限"
        name="wechat"
        :disabled="authLoading"
      ></el-tab-pane>
    </el-tabs>
    <div v-show="active === 'menu'">
      <el-scrollbar
        v-loading="authLoading"
        style="height: 50vh"
        wrapStyle="overflow-x: hidden;"
      >
        <el-tree
          ref="tree"
          :data="authData"
          :default-checked-keys="checked"
          :default-expand-all="true"
          :props="{ label: 'title' }"
          node-key="menuId"
          show-checkbox
        >
          <span slot-scope="{ data }">
            <i :class="data.icon"></i>
            <span> {{ data.title }}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
    <div v-show="active === 'sem'">
      <div class="el-form-item el-form-item--medium" style="margin-bottom: 0px">
        <label class="el-form-item__label" style="width: 90px">账户列表:</label>
        <div class="el-form-item__content" style="margin-left: 90px">
          <el-checkbox
            v-model="semAll"
            :indeterminate="semBoolean"
            @change="semAllChangeData"
            >全选/反选
          </el-checkbox>

          <span style="margin-left: 10px">
            <label style="width: 90px">归属客户:</label>
            <el-select
              class="filter-item"
              clearable
              placeholder="归属客户"
              size="small"
              v-model="semcustomerid"
              @change="semcustomeridchange"
              style="width: 150px; margin-left: 10px"
            >
              <el-option
                v-for="item in customer"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>

          <div style="float: right">
            <div class="el-form-item el-form-item--medium">
              <label class="el-form-item__label" style="width: 90px"
                >竞价账户:</label
              >
              <div class="el-form-item__content" style="margin-left: 90px">
                <el-input
                  clearable
                  placeholder="请输入搜索标题."
                  size="small"
                  v-model="semInput"
                  @clear="semClear"
                  style="width: 160px"
                ></el-input>
                <span style="margin-left: 10px"></span>

                <el-button
                  icon="el-icon-search"
                  size="small"
                  type="primary"
                  @click="semSearch"
                  >搜索</el-button
                >
              </div>
            </div>
          </div>
          <div style="margin: 10px 0"></div>
          <div
            style="
              border-radius: 3px;
              border: 1px solid var(--border-color-base);
              padding: 10px;
              height: 310px;
              overflow-y: auto;
              margin-bottom: 6px;
            "
          >
            <el-checkbox-group v-model="semData" @change="semChangeData">
              <el-checkbox
                v-for="obj in semTemp"
                v-show="obj.display"
                :key="obj.userid"
                :label="obj.userid"
                style="width: 260px"
                >[{{ obj.name }}] {{ obj.username }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div v-show="active === 'feed'">
      <div class="el-form-item el-form-item--medium" style="margin-bottom: 0px">
        <label class="el-form-item__label" style="width: 90px">账户列表:</label>
        <div class="el-form-item__content" style="margin-left: 90px">
          <el-checkbox
            v-model="feedAll"
            :indeterminate="feedBoolean"
            @change="feedAllChangeData"
            >全选/反选
          </el-checkbox>

          <span style="margin-left: 10px">
            <label style="width: 90px">归属客户:</label>
            <el-select
              class="filter-item"
              clearable
              placeholder="归属客户"
              size="small"
              v-model="feedcustomerid"
              @change="feedcustomeridchange"
              style="width: 150px; margin-left: 10px"
            >
              <el-option
                v-for="item in customer"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>

          <div style="float: right">
            <div class="el-form-item el-form-item--medium">
              <label class="el-form-item__label" style="width: 90px"
                >信息流账户:</label
              >
              <div class="el-form-item__content" style="margin-left: 90px">
                <el-input
                  clearable
                  placeholder="请输入搜索标题."
                  size="small"
                  v-model="feedInput"
                  @clear="feedClear"
                  style="width: 160px"
                ></el-input>
                <span style="margin-left: 10px"></span>

                <el-button
                  icon="el-icon-search"
                  size="small"
                  type="primary"
                  @click="feedSearch"
                  >搜索</el-button
                >
              </div>
            </div>
          </div>
          <div style="margin: 10px 0"></div>
          <div
            style="
              border-radius: 3px;
              border: 1px solid var(--border-color-base);
              padding: 10px;
              height: 310px;
              overflow-y: auto;
              margin-bottom: 6px;
            "
          >
            <el-checkbox-group v-model="feedData" @change="feedChangeData">
              <el-checkbox
                v-for="obj in feedTemp"
                v-show="obj.display"
                :key="obj.userid"
                :label="obj.userid"
                style="width: 260px"
                >[{{ obj.name }}] {{ obj.username }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div v-show="active === 'wechat'">
      <div class="el-form-item el-form-item--medium" style="margin-bottom: 0px">
        <label class="el-form-item__label" style="width: 90px">微信列表:</label>
        <div class="el-form-item__content" style="margin-left: 90px">
          <el-checkbox
            v-model="wechatAll"
            :indeterminate="wechatBoolean"
            @change="wechatAllChangeData"
            >全选/反选
          </el-checkbox>

          <span style="margin-left: 10px">
            <label style="width: 90px">归属客户:</label>
            <el-select
              class="filter-item"
              clearable
              placeholder="归属客户"
              size="small"
              v-model="wechatcustomerid"
              @change="wechatcustomeridchange"
              style="width: 150px; margin-left: 10px"
            >
              <el-option
                v-for="item in customer"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>

          <div style="float: right">
            <div class="el-form-item el-form-item--medium">
              <label class="el-form-item__label" style="width: 90px"
                >微信号:</label
              >
              <div class="el-form-item__content" style="margin-left: 90px">
                <el-input
                  clearable
                  placeholder="请输入搜索标题."
                  size="small"
                  v-model="wechatInput"
                  @clear="wechatClear"
                  style="width: 160px"
                ></el-input>
                <span style="margin-left: 10px"></span>

                <el-button
                  icon="el-icon-search"
                  size="small"
                  type="primary"
                  @click="wechatSearch"
                  >搜索</el-button
                >
              </div>
            </div>
          </div>
          <div style="margin: 10px 0"></div>
          <div
            style="
              border-radius: 3px;
              border: 1px solid var(--border-color-base);
              padding: 10px;
              height: 310px;
              overflow-y: auto;
              margin-bottom: 6px;
            "
          >
            <el-checkbox-group v-model="wechatData" @change="wechatChangeData">
              <el-checkbox
                v-for="obj in wechatTemp"
                v-show="obj.display"
                :key="obj.id"
                :label="obj.id"
                style="width: 260px"
                >[{{ obj.name }}] {{ obj.nickname }} {{ obj.wechat }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        :disabled="authLoading"
        :loading="loading"
        type="primary"
        @click="save"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "RoleAuth",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 当前角色数据
    data: Object,
  },
  data() {
    return {
      // 归属客户
      customer: [],

      // 微信全选
      wechatAll: false,

      // 微信全选是否全部勾选
      wechatBoolean: false,

      // 微信输入框
      wechatInput: "",

      // 微信列表
      wechatTemp: [],

      // 微信选中数据
      wechatData: [],

      // 微信归属客户
      wechatcustomerid: "",

      // 信息流全选
      feedAll: false,

      // 信息流全选是否全部勾选
      feedBoolean: false,

      // 信息流输入框
      feedInput: "",

      // 信息流列表
      feedTemp: [],

      // 信息流选中数据
      feedData: [],

      // 信息流归属客户
      feedcustomerid: "",

      // 竞价全选
      semAll: false,

      // 竞价全选是否全部勾选
      semBoolean: false,

      // 竞价输入框
      semInput: "",

      // 竞价列表
      semTemp: [],

      // 竞价选中数据
      semData: [],

      // 竞价归属客户
      semcustomerid: "",

      show: false,
      active: "menu",
      // 权限数据
      authData: [],
      // 权限数据请求状态
      authLoading: false,
      // 提交状态
      loading: false,
    };
  },
  computed: {
    // 权限树选中数据
    checked() {
      let checked = [];
      this.$util.eachTreeData(this.authData, (d) => {
        if (d.checked && (!d.children || !d.children.length)) {
          checked.push(d.menuId);
        }
      });
      return checked;
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.query();
      }
    },
  },
  methods: {
    closed() {
      this.active = "menu";
    },

    wechatClear() {
      for (let i in this.wechatTemp) {
        if (this.wechatcustomerid) {
          if (this.wechatcustomerid == this.wechatTemp[i].customerid) {
            this.wechatTemp[i].display = true;
          } else {
            this.wechatTemp[i].display = false;
          }
        } else {
          this.wechatTemp[i].display = true;
        }
      }
    },

    wechatAllChangeData(obj) {
      let ids = this.wechatTemp.map((arr) => {
        return arr.id;
      });
      this.wechatBoolean = false;
      this.wechatData = obj ? ids : [];
    },

    wechatChangeData(obj) {
      this.wechatAll = obj.length === this.wechatTemp.length;
      this.wechatBoolean =
        obj.length > 0 && obj.length < this.wechatTemp.length;
    },

    wechatSearch() {
      const wechatInput = this.wechatInput + "";
      if (!wechatInput) {
        this.wechatClear();
        return;
      }
      for (let i in this.wechatTemp) {
        let name = this.wechatTemp[i].name + "";
        let wechat = this.wechatTemp[i].wechat + "";
        let nickname = this.wechatTemp[i].nickname + "";
        if (this.wechatcustomerid) {
          if (this.wechatcustomerid == this.wechatTemp[i].customerid) {
            this.wechatTemp[i].display =
              name.indexOf(wechatInput) > -1 ||
              wechat.indexOf(wechatInput) > -1 ||
              nickname.indexOf(wechatInput) > -1;
          } else {
            this.wechatTemp[i].display = false;
          }
        } else {
          this.wechatTemp[i].display =
            name.indexOf(wechatInput) > -1 ||
            wechat.indexOf(wechatInput) > -1 ||
            nickname.indexOf(wechatInput) > -1;
        }
      }
    },

    wechatcustomeridchange(obj) {
      if (obj) {
        for (let i in this.wechatTemp) {
          if (obj == this.wechatTemp[i].customerid) {
            this.wechatTemp[i].display = true;
          } else {
            this.wechatTemp[i].display = false;
          }
        }
      } else {
        for (let i in this.wechatTemp) {
          this.wechatTemp[i].display = true;
        }
      }
    },

    feedClear() {
      for (let i in this.feedTemp) {
        if (this.feedcustomerid) {
          if (this.feedcustomerid == this.feedTemp[i].customerid) {
            this.feedTemp[i].display = true;
          } else {
            this.feedTemp[i].display = false;
          }
        } else {
          this.feedTemp[i].display = true;
        }
      }
    },

    feedAllChangeData(obj) {
      let ids = this.feedTemp.map((arr) => {
        return arr.userid;
      });
      this.feedBoolean = false;
      this.feedData = obj ? ids : [];
    },

    feedChangeData(obj) {
      this.feedAll = obj.length === this.feedTemp.length;
      this.feedBoolean = obj.length > 0 && obj.length < this.feedTemp.length;
    },

    feedSearch() {
      const feedInput = this.feedInput + "";
      if (!feedInput) {
        this.feedClear();
        return;
      }
      for (let i in this.feedTemp) {
        let name = this.feedTemp[i].name + "";
        let userid = this.feedTemp[i].userid + "";
        let username = this.feedTemp[i].username + "";
        if (this.feedcustomerid) {
          if (this.feedcustomerid == this.feedTemp[i].customerid) {
            this.feedTemp[i].display =
              name.indexOf(feedInput) > -1 ||
              userid.indexOf(feedInput) > -1 ||
              username.indexOf(feedInput) > -1;
          } else {
            this.feedTemp[i].display = false;
          }
        } else {
          this.feedTemp[i].display =
            name.indexOf(feedInput) > -1 ||
            userid.indexOf(feedInput) > -1 ||
            username.indexOf(feedInput) > -1;
        }
      }
    },

    feedcustomeridchange(obj) {
      if (obj) {
        for (let i in this.feedTemp) {
          if (obj == this.feedTemp[i].customerid) {
            this.feedTemp[i].display = true;
          } else {
            this.feedTemp[i].display = false;
          }
        }
      } else {
        for (let i in this.feedTemp) {
          this.feedTemp[i].display = true;
        }
      }
    },

    semClear() {
      for (let i in this.semTemp) {
        if (this.semcustomerid) {
          if (this.semcustomerid == this.semTemp[i].customerid) {
            this.semTemp[i].display = true;
          } else {
            this.semTemp[i].display = false;
          }
        } else {
          this.semTemp[i].display = true;
        }
      }
    },

    semAllChangeData(obj) {
      let ids = this.semTemp.map((arr) => {
        return arr.userid;
      });
      this.semBoolean = false;
      this.semData = obj ? ids : [];
    },

    semChangeData(obj) {
      this.semAll = obj.length === this.semTemp.length;
      this.semBoolean = obj.length > 0 && obj.length < this.semTemp.length;
    },

    semSearch() {
      const semInput = this.semInput + "";
      if (!semInput) {
        this.semClear();
        return;
      }
      for (let i in this.semTemp) {
        let name = this.semTemp[i].name + "";
        let userid = this.semTemp[i].userid + "";
        let username = this.semTemp[i].username + "";

        if (this.feedcustomerid) {
          if (this.feedcustomerid == this.feedTemp[i].customerid) {
            this.semTemp[i].display =
              name.indexOf(semInput) > -1 ||
              userid.indexOf(semInput) > -1 ||
              username.indexOf(semInput) > -1;
          } else {
            this.semTemp[i].display = false;
          }
        } else {
          this.semTemp[i].display =
            name.indexOf(semInput) > -1 ||
            userid.indexOf(semInput) > -1 ||
            username.indexOf(semInput) > -1;
        }
      }
    },

    semcustomeridchange(obj) {
      if (obj) {
        for (let i in this.semTemp) {
          if (obj == this.semTemp[i].customerid) {
            this.semTemp[i].display = true;
          } else {
            this.semTemp[i].display = false;
          }
        }
      } else {
        for (let i in this.semTemp) {
          this.semTemp[i].display = true;
        }
      }
    },

    /* 搜索权限数据 */
    query() {
      this.authData = [];
      if (!this.data) return;
      this.authLoading = true;
      this.$http
        .get("/role/roleList", {
          params: {
            roleId: this.data.id,
          },
        })
        .then((res) => {
          this.authLoading = false;
          if (res.data.code === 0) {
            this.customer = res.data.customer;
            this.semTemp = res.data.semTemp;
            this.semData = res.data.semData;
            this.feedTemp = res.data.feedTemp;
            this.feedData = res.data.feedData;
            this.wechatTemp = res.data.wechatTemp;
            this.wechatData = res.data.wechatData;

            this.semAll = res.data.semTemp.length === res.data.semData.length;
            this.semBoolean =
              res.data.semData.length > 0 &&
              res.data.semData.length < res.data.semTemp.length;

            this.feedAll =
              res.data.feedTemp.length === res.data.feedData.length;
            this.feedBoolean =
              res.data.feedData.length > 0 &&
              res.data.feedData.length < res.data.feedTemp.length;

            this.wechatAll =
              res.data.wechatTemp.length === res.data.wechatData.length;

            this.wechatBoolean =
              res.data.wechatData.length > 0 &&
              res.data.wechatData.length < res.data.wechatTemp.length;

            this.authData = this.$util.toTreeData({
              data: res.data.data,
              idKey: "menuId",
              pidKey: "parentId",
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.authLoading = false;
          this.$message.error(e.message);
        });
    },
    /* 确定权限分配 */
    save() {
      this.loading = true;
      let ids = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      this.$http
        .put("/role/roleList/id/" + this.data.id, {
          ids: ids.join(","),
          semData: this.semData,
          feedData: this.feedData,
          wechatData: this.wechatData,
        })
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.updateVisible(false);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped>
.ele-popup-dialog /deep/ .el-dialog__body {
  padding-top: 10px !important;
}
.ele-popup-dialog /deep/ .el-tabs {
  margin-bottom: 15px;
}
</style>
